<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>事件监听</title>
  <style>
    br {
      margin-top: 40px;
    }
  </style>
</head>
<body>

<div id="app">
  <div>
    当前计数：{{counter}}
  </div>

  <!--  ■vue事件，以v-on:开头，指定不同的事件，事件的属性值可以是方法，也可以是代码片段,这里监听点击事件-->
  <button v-on:click="increment">+</button>
  <button v-on:click="decrement">-</button>
  <br>

  <!--  ■@是语法糖的一种写法，等价于v-on:,为了简写方便，用以替换v-on:-->
  <button @click="increment">@+</button>
  <button @click="decrement">@-</button>
  <br><br>

  <!--  ■当调用一个含有参数的方法时，如果什么都不传入，会默认向方法传入事件对象,事件对象为方法的第一个参数，调用时可以简写省去括号-->
  <!-- （1）不加括号时，函数第一个参数为 event；
       （2）加了括号后，需要手动传入 $event 才能获得事件对象。-->
  <button @click="getEvent">点击</button>
  <!-- <button @click="getEvent($event)">点击</button> -->

  <!--  ■当我们需要传入其他值，又需要传入事件时，事件用$event传入 ,传入的参数值如果没有用单引号包裹起来，默认认为是变量名，变量必须定义过才能够
  被cue解析，否则会报错，如果传入的是数字，则不需要加单引号-->
  <button @click="getInfo(123,'小明',counter,$event)">点击2</button>
  <br><br>


  <!--  ■【事件修饰符的使用，也就是在事件监听后以 .xxx结尾的就是事件修饰符】-->

  <!--1、  .stop - 调用event.stopPropagation() ，.stop修饰符阻止事件冒泡 ,传统js用的是event.stopPropagation()方法来消除事件冒泡
         什么是事件冒泡呢，意思是，事件会向父类进行传递，比如这里：点击事件会向父类进行传递，当点击某个子元素时，如果他的父类也存在点击事件，则这个父类的点击事件也会触发
         这里就是点击button时会触发div的点击事件，因为用了.stop就消除了这种冒泡传递-->
  <div @click="divClick">
    测试事件冒泡
    <button @click.stop="btnClick">点击3</button>
  </div>
  <br><br>

  <!--2、  .prevent - 调用event.preventDefault() , .prevent阻止默认事件-->
  <!--  默认情况下我们点击提交按钮会自动提交表单，通过.prevent修饰符可以阻止默认事件，这样我们就可以通过我们调用的方法来自己定义提交-->
  <form action="baidu">
    <input type="submit" value="点击提交" @click.prevent="submitClick">
  </form>
  <br><br>

  <!--3、  监听某个键盘的键帽，如果没有以 .xxx 结尾来指定某个按键，则所有的按键这个事件都生效，加了 .xxx来指定某个按键，则只对这个按键生效
  xxx 是按键的名称或者是按键对应的数字-->
  所有抬起事件：<input type="text" @keyup="keyEventAll"><br>
  enter键抬起事件：<input type="text" @keyup.enter="keyEventEnter">
  <br><br>

  <!--4、  .once 调用方法时只调用一次-->
  <button @click.once="btnClick">点击只生效一次</button>


</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      counter: 0
    },
    methods: {
      increment() {
        this.counter++
      },
      decrement() {
        this.counter--
      },
      getEvent(event) {
        console.log(event)
      },
      getInfo(num, name, count, event) {
        console.log(num)
        console.log(name)
        console.log(count)
        console.log(event)
      },
      btnClick() {
        console.log("btnClick")
      },
      divClick() {
        console.log("divClick")
      },
      submitClick() {
        console.log("提交表单")
      },
      keyEventAll() {
        console.log("所有按键抬起事件")
      },
      keyEventEnter() {
        console.log("enter按键抬起事件")
      }
    }
  });
</script>
</body>
</html>